<template>
  <h4>----------E----------</h4>
  <div class="E">
    <h5>1:监视[ref]定义的[基本类型]数据</h5>
    <h5>当前和为:{{ sum }}</h5>
    <button @click="sum++">点我+1</button>
    <br>
    <h5>2:监视[ref]定义的[对象类型]数据</h5>
    <h5>姓名:{{ person_ref.name }},年龄:{{ person_ref.age }}</h5>
    <button @click="person_ref.name += '~'">修改名字</button>
    <button @click="person_ref.age += 1">修改年龄</button>
    <button
      @click="person_ref = { name: '李四', age: 90 }">一起修改</button>
    <br>
    <h5>3:监视[reactive]定义的[对象类型]数据</h5>
    <h5>姓名:{{ person_reactive.name }},年龄:{{ person_reactive.age }}
    </h5>
    <button @click="person_reactive.name += '~'">修改名字</button>
    <button @click="person_reactive.age += 1">修改年龄</button>
    <button
      @click="Object.assign(person_reactive, { name: '李四', age: 90 })">一起修改</button>
    <h5>4:监视[对象类型]数据中的某个属性,推荐写函数,且开深度</h5>
    <h5>姓名:{{ person.name }},年龄:{{ person.age }}</h5>
    <h5>汽车:{{ person.car.c1 }}+{{ person.car.c2 }}</h5>
    <button @click="person.name += '~'">修改名字</button>
    <button @click="person.age += 1">修改年龄</button>
    <button @click="person.car.c1 = '奥迪'">修改第一台车</button>
    <button @click="person.car.c2 = '红旗'">修改第二台车</button>
    <button
      @click="person.car = { c1: '雅迪', c2: '艾玛' }">修改所有车</button>
  </div>
</template>

<script setup lang="ts" name="E">
import { ref, watch, reactive } from "vue"
/* 
watch监视的数据类型：
    1 ref定义的数据。
    2 reactive定义的数据。
    3 函数返回一个值（getter函数）。
    4 一个包含上述内容的数组。
*/
/* -----------情况1-----------*/
let sum = ref(0)
const stopWatch1 = watch(sum, (newVal, oldVal) => {
  console.log("sum变化了", oldVal, '-->', newVal)
  if (newVal >= 10) {
    stopWatch1()
  }
})
/* -----------情况2-----------*/
let person_ref = ref({ name: "张三Ref", age: 18 })
//! 监视的是对象的地址
//! 若想监视对象内部数据变化,要手动开启深度监视,但仍为通过地址找对象
const stopWatch2 = watch(person_ref, (newVal, oldVal) => {
  console.log('person变化了', oldVal, '-->', newVal)
}, {
  deep: true,
  // 上来就执行一次
  // immediate: true
})
/* -----------情况3-----------*/
// 默认开启深度监视且无法关闭
let person_reactive = reactive({ name: "张三Reactive", age: 18 })
const stopwatch3 = watch(person_reactive, (newVal, oldVal) => {
  console.log('person_reactive变化了', oldVal, '-->', newVal);
})
/* -----------情况4-----------*/
let person = reactive({
  name: "张三",
  age: 18,
  car: {
    c1: '奔驰',
    c2: '宝马'
  }
})
// const stopwatch4 = watch(() => person.name, (newVal, oldVal) => {
//   console.log('person.name变化了', oldVal, '-->', newVal);
// })
// const stopwatch6 = watch(() => person.car, (newVal, oldVal) => {
//   console.log('person.car变化了', oldVal, '-->', newVal);
// }, {
//   deep: true
// })
const stopwatch_union = watch([() => person.name, person.car], (newVal, oldVal) => {
  console.log('person变化了', oldVal, '-->', newVal);
}, {
  deep: true
})
</script>

<style></style>
